<style>
  @import "../../../static/z39pc/css/app.6689eaa302.css";
  @import "../../../static/z39pc/css/app.bb9deb9e54.css";
  @import "../../../static/z39pc/css/animate.min.css";
  @import "../../../static/z39pc/css/mycss/taskDetail.css";
  @import "../../../static/z39pc/css/mycss/task.css";
  @import "../../../static/z39pc/css/mycss/needAndAdvice.css";
</style>
<template>
  <div class="task-main-container  need-and-advice">
    <div id="mainBody" class="chrome webkit win modal-open" style="overflow-x: hidden;">
      <div id="nTalk_post_hiddenElement"
           style="left: -10px; top: -10px; visibility: hidden; display: none; width: 1px; height: 1px;"></div>

      <header-nav></header-nav>

      <div id="mainContent" style="background: none;">
        <!--<template>-->
        <div class="kanban-view">
          <div class="container-left-content active">
            <div class="show-box">
              <div class="icon-right el-icon-d-arrow-right">

              </div>
            </div>
            <div class="storageBox animated RSQ_fadeInLeft" id="storageBox">

              <div id="left-box-container1">
                <el-menu default-active="1" class="el-menu-vertical-demo">
                  <el-menu-item index="1" @click="linkToPage('/advice')">
                    <i class="el-icon-menu"></i>
                    <span slot="title">
							    	建议
							    </span>
                  </el-menu-item>
                  <el-menu-item index="2" @click="linkToPage('/need')">
                    <i class="el-icon-setting"></i>
                    需求
                  </el-menu-item>
                </el-menu>
              </div>

            </div>

          </div>
          <div class="container-right">
            <div class="container-right-bottom-bg"></div>
            <div class="container-right-content">

              <!-- 写右边的内容 -->
              <router-view ref="taskChildPage" class="view" keep-alive transition transition-mode="out-in">
              </router-view>
            </div>
          </div>
        </div>
      </div>
      <!--</template>-->
    </div>

  </div>
  </div>
</template>
<div id="cli_dialog_div"></div>
<div id="cli_dialog_div"></div>
<div id="cli_dialog_div"></div>
<script>
  import '../../../static/z39pc/js/jquery-2.1.0.js'
  import draggable from 'vuedraggable'
  import _ from "underscore";
  import moment from "moment";
  import headerNav from '../../components/all/header.vue'
  import api from '../../api';
  import {taskAndTag} from "../../common/mixin";
  import {mixinPc} from "../../common/mixinPc";
  import {
    mapState,
    mapActions
  } from 'vuex'

  var initPage = function (me) {
    $('body').css({
      'height': '100%',
      'overflow': 'hidden'
    })
    $('#menu-show').click(function () {
      $(this).hide();
      $('.projectList').show();
      $('.memberList').hide();
      $('.type_filter.switch3Ul').css({
        'left': '300px'
      });
    })

//		$('.inUl.prolist').on('click', 'li', function() {
//			$(this).addClass('active').siblings().removeClass('active')
//		})
    //缩小收纳箱
    //快捷键关闭任务详情
    var showAddHideBox = function (action) {
      if (action == 'hide') {
        $('#mainContent .container-left-content').animate({
          width: '50px',
        }, 300, function () {
          $('.container-left-content .show-box').show();
        })
        $('#mainContent .container-right').animate({
          left: '50px',
        }, 300)
        $('.container-left-content').removeClass('active')
      } else if (action == 'show') {
        $('#mainContent .container-left-content').animate({
          width: '311px',
        }, 300, function () {
          $('.container-left-content .show-box').hide();
        })
        $('#mainContent .container-right').animate({
          left: '311px',
        }, 300)
        $('.container-left-content').addClass('active')
      }
    }


    //显示隐藏任务详情
    $('body').on('dblclick', '.kanban-item-warp ul.allow-detail-click li', function (e) {
      $('.task-detail-container').show()
      $('.task-detail-container').animate({
        right: '-24px'
      }, 300)
      $('.kanban-main-warp .kanban-main-container').animate({
        right: '340px'
      }, 300)
      e.cancelBublle = true;
      e.stopPropagation();
      $(this).addClass('active');
      $(this).siblings().removeClass('active');
      itemAni(this);
    })
    $('body').on('click', '.task-detail-container .close', function () {
      $('.task-detail-container').animate({
        right: '-400px'
      }, 300)
      $('.kanban-main-warp .kanban-main-container').animate({
        right: '70px'
      }, 300)
    })

    $('body').on('dragstart', '.dragArea li.kanban-Item-container', function (e) {
      if (me.$route.name == '项目任务' && !me.projectId) {
        return false;
      }
      $('.dragArea').css('border-color', '#000')
    })
    $('body').on('drop', '.dragArea', function (e) {
      $('.dragArea').css('border-color', 'transparent')
    })

    //点击任务的时候,动画效果
    $('body').on('click', '#tagTmpList li.kanban-Item-container .right', function (e) {
      e.cancelBublle = true;
      e.stopPropagation();
      var clickParant = $($(this).parents('.kanban-Item-container')[0]);
      $(clickParant).toggleClass('active');
      $(clickParant).siblings().removeClass('active');
      itemAni(clickParant);

    })
    $('body').on('click', '.body-tr-container .kanban-item-warp', function () {
      if (!$(this).parents('.kanban-card-container').find('.header').hasClass('not-active')) {
        $(this).parents('.kanban-card-container').find('.header').click();
//
      }


    })

    //点击任务头
    $('body').on('click', '.kanban-card-container .header', function () {
      if (!$(this).hasClass('not-active')) {
        $('li.kanban-card-container .header').removeClass('active');
        $(this).addClass('active');

        $('.kanban-card-container').find('li.kanban-Item-container').removeClass('triangle-badge-rt');
        $(this).parents('.kanban-card-container').find('li.kanban-Item-container').each(function () {
          if ($(this).attr('data-quickNo') < 10) {
            $(this).addClass('triangle-badge-rt');
          }
        })
      }
    })

    function itemAni(item) {
      $(item).removeClass("animated bounceIn");
      setTimeout(function () {
        $(item).addClass("animated bounceIn");
      }, 10);
    }

    //列表头部添加任务
    $('body').on('click', '.head-tr .addItem', function () {
      if ($(this).hasClass('is-show-dialog')) {
        return;
      }
      if ($(this).hasClass('icon-close')) {
        $(this).prev().hide();
        $(this).removeClass('icon-close').addClass('icon-add_circle');
      } else {
        $('.kanban-card-container .head-tr .card-rename').hide();
        $('.kanban-card-container .head-tr .addItem').removeClass('icon-close').addClass('icon-add_circle');
        $(this).prev().show();
        $(this).addClass('icon-close').removeClass('icon-add_circle');
      }
    })
    $('body').on('click', '.kanban-card-container .no-task-container', function () {
      $(this).parent().parent().siblings('.head-tr').find('.addItem').click();
    })

  }
  import store from '../../store';

  export default {
    data() {
      return {
        boxTab: 'box',
        dateMonth: new Date(),
        memberActive: false,
        boxList: [],
        projectList: [],
        memberList: [],
        todayList: [],
        todayTags: [],
        fullscreenLoading: true,
        addBtnLoading: false,
        dragItemData: '',
        showMonth: '',
        showYear: '',
        showWeek: new Date(),

        taskDoing: null,
        sortStr: "",
        todayArr: [],
        todaySort: [],
        todaySortArr: [],
        visibility: false,
        daySelect: "",
        stateAdd: false,
        taskTitle: "",
        taskDesc: "",
        nonesList: [], //收纳箱列表,
        projectId: '', //选中的项目
      };
    },
    components: {
      draggable,
      'header-nav': headerNav
    },
    mixins: [taskAndTag, mixinPc],
    computed: {

      ...mapState({
        uid: state => state.vux.uid,
        sid: state => state.vux.sid,  //websocket id
        minDate: state => state.z39.minDate,
        maxDate: state => state.z39.maxDate,
        taskAll: state => state.z39.taskAll,
        tagDic: state => state.z39.tagDic,
        taskDic: state => state.z39.taskDic,
        tagitems: state => state.z39.tagitems,
        tagitemDic: state => state.z39.tagitemDic,
        days: state => state.z39.days,
        projects: state => state.z39.projects,
        members: state => state.z39.members,
        filterState: state => state.z39.filterTaskState,
      })
    },
    watch: {},
    created() {
    },
    filters: {},

    methods: {
      linkToPage: function (page) {
        this.$router.push({
          path: page
        })
      }
    },
    mounted: function () {
      // todo 修改pid
      store.commit('setPid', 20);
      store.dispatch('queryAdviceOrNeed', { key: 'suggest'});
      store.dispatch('queryAdviceOrNeed', { key: 'demand'});

//			if(this.$route.path=='/needAndAdvice'){
//				this.$router.push('/advice')
//			}
    }
  }
</script>
